<!--
 * @Description: 修改密码
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-20 16:12:35
 * @LastEditors: yxx
 * @LastEditTime: 2025-05-20 19:01:16
-->
<template>
  <div class="login-container flx-center" :style="{ backgroundColor: DEFAULT_PRIMARY }">
    <div class="login-box">
      <div class="login-left" :style="{ backgroundColor: DEFAULT_PRIMARY }">
        <div class="text">
          <div class="title">欢迎登录！</div>
          <div class="desc">{{ title }}</div>
        </div>
      </div>
      <div class="login-right">
        <LoginFromPassword />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="login">
import LoginFromPassword from "./components/LoginFromPassword.vue"
import { DEFAULT_PRIMARY } from "@/config"

const title = import.meta.env.VITE_GLOB_APP_TITLE
</script>

<style scoped lang="scss">
.login-container {
  height: 100%;
  min-height: 550px;
  background-size: 100% 100%;
  background-size: cover;
  .login-box {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 800px;
    height: 600px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 10%) 0 2px 30px 2px;
    .login-left {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      width: 40%;
      height: 100%;
      padding: 120px 20px 20px;
      .text {
        .title {
          margin-bottom: 20px;
          font-size: 36px;
          font-weight: bolder;
          color: #ffffff;
        }
        .desc {
          font-size: 26px;
          color: #ffffff;
        }
      }
    }
    .login-right {
      box-sizing: border-box;
      width: 60%;
      height: 100%;
      padding: 50px 40px 45px;
      background-color: #ffffff;
    }
  }
}

// @media screen and (width <= 1250px) {
//   .login-left {
//     display: none;
//   }
// }

// @media screen and (width <= 600px) {
//   .login-right {
//     width: 97% !important;
//   }
// }
</style>
